<template>
    
    <el-form-item label="規格設置">
      <table class="border">
        <thead>
          <tr>
            <th
              class="border"
              v-for="(th, thi) in tableThs"
              :key="thi"
              :width="th.width"
              :rowspan="th.rowspan"
              :colspan="th.colspan"
            >
              {{ th.name }}
            </th>
          </tr>
          <tr>
            <th class="border" v-for="(th, thi) in skuLabels" :key="thi">
              {{ th.specs_name }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in sku_table" :key="item.id">
            <td
              width="100"
              class="border text-center"
              v-for="(sku, index) in item.name"
              :key="index"
            >
              
              {{ sku.name }}
            </td>
            <td class="border">
               
              <el-input
                v-model="item.price"
                size="small"
                type="number"
              ></el-input>
            </td>
            <td class="border">
              <el-input
                v-model="item.const"
                size="small"
                type="number"
              ></el-input>
            </td>
            <td class="border">
              <el-input
                v-model="item.num"
                size="small"
                type="number"
              ></el-input>
            </td>
          </tr>
        </tbody>
      </table>
    </el-form-item>
  </template>
  
  <script setup>
  import { initSkuTable } from "@/composables/useSku.js";
  const { skuLabels, tableThs, sku_table } = initSkuTable();



  </script> 